<!DOCTYPE html>
<html lang='zh-CN'>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1'>
  <meta name='viewport' content='with=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1'>
  <title>试用申请—职薪人HRO</title>
  <style>
    * {
      box-sizing: border-box;
    }
    .form-wrapper {
      margin: 24px auto;
      font-size: 16px;
    }
    .form-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }
    span {
      color: red;
    }
    label {
      display: inline-block;
      width: 90px;
      text-align: right;
      align-self: flex-start;
      line-height: 32px;
      color: #333;
    }
    input, textarea {
      width: 230px;
      line-height: 32px;
      padding: 0 8px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      color: #333;
    }
    input:focus, textarea:focus, select:focus {
      outline: 1px solid rgba(106, 102, 246, 0.6);
    }
    select {
      width: 230px;
      height: 32px;
      line-height: 32px;
      padding: 0 8px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      color: #333;
      position: relative;
    }
    option {
      text-indent: 10px;
    }
    input::input-placeholder, textarea::input-placeholder, select::input-placeholder {
      color:#999;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {
      color:#999;
    }
    button {
      background: rgba(106, 102, 246, 1);
      color: #fff;
      border: none;
      line-height: 40px;
      padding: 0 12px;
      border-radius: 4px;
      width: 200px;
      font-weight: 500;
      font-size: 16px;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.125);
    }
  </style>
</head>

<body>
  <div class="form-wrapper">
    <form action="" method="post" onsubmit="return onSubmit(this)">
      <div class="form-item">
        <label><span>* </span>姓名：</label>
        <input type="text" placeholder="请输入姓名" name="name" required />
      </div>
      <div class="form-item">
        <label><span>* </span>手机号：</label>
        <input type="text" placeholder="请输入手机号码" name="phone" required />
      </div>
      <div class="form-item">
        <label>城市：</label>
        <input type="text" placeholder="请输入城市" name="cityName" />
      </div>
      <div class="form-item">
        <label>公司：</label>
        <input type="text" placeholder="请输入公司名称" name="companyName" />
      </div>
      <div class="form-item">
        <label>注册原因：</label>
        <select name="registerReason">
          <option value="1">试用参考</option>
          <option value="2">学习了解</option>
          <option value="3">商务合作</option>
        </select>
      </div>
      <div class="form-item">
        <label>留言：</label>
        <textarea type="text" placeholder="请输入留言" name="leaveMessage" rows="4"></textarea>
      </div>
      <div class="form-item" style="margin-top: 32px">
        <button type="submit">提交申请</button>
      </div>
    </form>
  </div>
</body>
<script>
  function onSubmit(form) {
    const formData = new FormData(form)
    const values = {}
    for (let key of formData.keys()) {
      values[key] = formData.get(key)
    }

    const xhr = new XMLHttpRequest();
    xhr.open("post", "https://zhixinren.work/hr/api/v1/userRegisterCensors/submitRegisterReview", true);
    xhr.setRequestHeader('content-type', 'application/json');
    xhr.onreadystatechange = function() {
      if (xhr.readyState !== 4) {
        return
      }
      if (xhr.status === 200) {
        alert('提交成功')
      } else {
        alert('提交失败，请在公众号留言联系客服')
      }
    }
    xhr.send(JSON.stringify(values));
    return false;
  }
</script>
</html>